<template>
	<div class="player" >
		<!-- 提示弹层 -->
		<!-- 提示弹层 --> 
		<popup :popupShow="popupShow" :popupType="2" :popupText="popupText" :popupTips="popupTips" @popupCancel="popupShow=false" @popupSure="popupSure()"></popup>
		<!-- 音频  v-if="isPoeReady"-->
		<audio
			ref="in-audio"
			:src="audioSrc"
			@play="inAudioPlay()"
			@pause="inAudioPause()"
			@timeupdate="inAudioTime()"
			@error="inAudioError()"
			@canplay="inAudioCanplay()"
			@ended="inAudioEnd()"
			@playing="inPlaying()"
			@waiting="inAudioWait()"
		></audio>
		<!-- 提示弹层 -->

		<!-- 列表 -->
		<transition name="rightfadePage">
			<div class="bg" v-show="navShow">
				<div class="close-poe-list" @click="navShow=false"></div>
				<Poelist ref="poe-list" :poeId="poe.id" :hasPlay="isPlay" :isShow="isShow" @poeChange="poeChange" @getPoetryListAll="getPoetryList" @stopBtn="stopBtn"></Poelist>
			</div>
		</transition>
		<!-- 赏析 -->
		<transition name="fade">
			<Analysis v-show="analShow" :poe="poe" @analysisClose="analShow=false"></Analysis>
		</transition>

		<!-- 评分 -->
		<div class="player-score in-mask" v-show="scoreShow">
			<div class="mask-close" @click="scoreShow=false"></div>
			<div class="playermask-con">
				<canvas id="can"></canvas>
				<div class="lbg">
					<div class="score">{{poeScore}}</div>
					<div class="level">播音员级别</div>
					<div class="btn-next" @click="nextOne(2)">再配一首</div>
				</div>
			</div>
		</div>
		<!-- 主体 -->
		<div class="player-body">
			<div class="player-bbox">
				<!-- 选择 -->
				<div :class="chose==1? 'player-chose clearfix':'player-chose clearfix change'">
					<span class="left" @click="choseClick(1)"></span>
					<span class="right" @click="choseClick(2)"></span>
				</div>
				<!-- 诗词 -->
				<div class="player-box">
					<div :class="!isLook && isRecord==1? 'is-look player-main' : 'player-main'" ref="player-main">
						<div class="poe-title">
							<div v-for="(item,index) in poe.nameSerialize" :key="'index' +index" :class="poe.ReadType==2? 'word not-mast' : 'word'">
								<i>{{item.pinYin}}</i>
								<em :class="item.isRed && chose==2 ? 'is-red':''">{{item.chinese}}</em>
							</div>
						</div>
						<div class="poe-author">
							<div v-for="(item,index) in poe.dynastySerialize" :key="'d'+index" class="word">
								<i>{{item.pinYin|| ''}}</i>
								<em :class="item.isRed && chose==2 ? 'is-red':''">{{item.chinese || ''}}</em>
							</div>
							<div class="word punc">
								<i></i>
								<em v-show="poe.dynastySerialize">·</em>
							</div>
							<div v-for="(item,index) in poe.authorSerialize" :key="'a'+index" class="word">
								<i>{{item.pinYin}}</i>
								<em :class="item.isRed && chose==2 ? 'is-red':''">{{item.chinese}}</em>
							</div>
						</div>
						<ul class="poe-body">
							<li v-for="(list,index) in poe.contextSerialize" :key="index">
								<div v-for="(item,i) in list" :key="i" class="word">
								<i>{{item.pinYin}}</i>
								<em :class="item.isRed && chose==2 ? 'is-red':''">{{item.chinese}}</em>
								</div>
							</li>
						</ul>
						<!-- 蒙板 -->
						<div class="look-mask"></div>
					</div>
					<div class="player-tool clearfix">
						<div class="gradient"></div>
						<div class="look-btn">
							<span
								v-show="isRecord==1 && chose==2"
								:class="isLook? 'is-look' : ''"
								@touchstart="isLook=true"
								@touchend="isLook=false"
							>偷瞄一眼</span>
							<em v-show="isRecord==2 && chose==2 && hasRed">红：发音不标准</em>
							<span v-show="chose==1" @click="analShow=true">赏析</span>
						</div>
					</div>
				</div>
			</div>

			<!-- 底部按钮区 -->
			<div class="player-bottom"> <!-- v-if="userType != 2 && " -->
				<!-- 原音 -->
				<div class="main-btn" v-show="chose==1">
					<div class="study-btn clearfix">
						<div class="left switch" @click="lastOne()"></div>
						<div class="play-btn left">
							<span :class="[isPlay ? 'pause' : 'play']" @click="playBtn()"></span>
						</div>
						<div class="right switch" @click="nextOne(1)"></div>
					</div>
					<p>{{studyText}}</p>
				</div>

				<!-- 背诵 -->
				<div :class="isRecord==1 ? 'main-btn has-track' : 'main-btn'" v-show="userType!=2 && chose==2 && (!poe.soundUrl && isPoeReady)">
					<span
						:class="[isRecord==1 || recordPlay ? 'stop' : '',isRecord==2 ? 'play' : '']"
						@click="recordClick()"
					></span>
					<p>{{tipText}}</p>
				</div>
				<div class="nav" v-show="(isRecord==0 && !isRead) || chose==1" @click="navClick()"></div>
				<!-- 菜单 -->
				<div class="repeat" v-show="isRecord==2 && chose==2" @click="repeatClick()"></div>
				<!-- 重背 -->
				<div class="save" v-show="isRecord==2 && chose==2" @click="saveClick()"></div>
				<!-- 提交 -->
			</div>

			<!-- 老师评价模块 -->
			<div class="pinjia_bg" v-if="(userType == 2 || poe.soundUrl) && chose == 2" >
				<div class="stuInfo">
					<div class="img">
						<img class="user-avatar" :src="submitUser.userAvatar" :onerror="headError" />
					</div>
					<div class="stu">
						<div class="stu_name">{{submitUser.sstUserTruename}}</div>
						<div class="stu_class">{{submitUser.className}}</div>
					</div>
					<div class="score">{{poe.score || 0}}分</div>
				</div>
				<audiop :audioPath="poe.soundUrl" :inTotalTime="lengthTime"></audiop>

				<!--如果是老师权限，或者是学生权限有点赞或者有留言-->
				<div class="line" v-if="userType == 2 || readNewLogInfo.isPraise==1 || readNewLogInfo.teacherContents"></div>

				<div class="encourage" v-if="userType == 2 || readNewLogInfo.isPraise==1">
					<div class="ico_praise" @click="encourageBtn('Prise')">
						<span :class="{'on':readNewLogInfo.isPraise==1,'active':isActPraise}"></span>
					</div>
					<div class="vtxt">{{readNewLogInfo.isPraise==1?(userType == 3&&teacherName?teacherName:'')+'已点赞':'为TA点赞'}}</div>
				</div>

				<div class="comment" v-if="userType == 2 || readNewLogInfo.teacherContents">
					<div class="txt">教师评语:</div>
					<textarea
						v-model="content"
						maxlength="50"
						class="comment_content"
						rows="3"
						placeholder="请输入评语"
						:disabled="userType != 2"
					></textarea>
					<div v-if="userType == 2" :class="start_input ? 'btn_s' : 'btn_t'" @click="encourageBtn('noPrise')"></div>
				</div>

			</div>
		</div>
		<div class="loadTips" v-if="isSpeechAssessment">正在评测中，请稍后...</div>
	</div>
</template>

<script>
import {
	iosSystem,
	touchFalse,
	touchTrue,
	touchDefault
} from "@/utils/common";
import { mapGetters,mapActions } from "vuex";
import Analysis from "./analysis";
import Poelist from "./poe-list";
import audiop from "./audio-player";
import wx from "weixin-js-sdk";
import * as api from '@/api/index';
import popup from '../components/popup'

import  * as dataApi from '@/api/dataApi'

import UPlayAnimate from '@/views/game/imgCanvas'
export default {
	name: "prize",
	components: {
		popup,
		Analysis,
		Poelist,
		audiop
	},
	computed: {
		...mapGetters(["headError","getPoeId"])
	},
	data() {
		return {
			isShow:'show', //标志是内部组件显示还是路由
			userInfo: JSON.parse(localStorage.getItem("userInfo")),
			userType: '',

			submitUser:{},

			userid: localStorage.getItem("userId"),
			userName: sessionStorage.getItem("userName")
				? sessionStorage.getItem("userName")
				: "",
			audioPath: "", //学生的录音
			inTotalTime: "", //录音时长

			//各弹层变量
			popupShow: false,
			popupText: "删除已录部分，重新录制？",
			popupTips: "",
			
			analShow: false, //赏析弹窗
			navShow: false,

			//诗词信息
			poe: {},
			poetryList:[], //诗词列表
			poeRecordJson: [],
			audioSrc: "",
			isPlay: false, //播放状态
			isPoeReady:false,	//诗词是否已经加载完毕
			//录音
			recordid: "",
			recordText: "", //录音内容文本，传给sdk
			recordResJson: "", //录音结果，用于错字标红
			recordFile: "", //录音文件
			recordUrl: "", //录音服务器地址
			actualTime: 0, //手机端传过来的录音时间
			recordTime: 0, //计时录音时间
			recordTimer: {}, //计时器
			isRecord: 0, //0默认，1正在录音，2录完音可播放
			recordPlay: false, //录音播放状态
			tipText: "点击按钮开始背诵",

			scoreShow: false, //录完后分数弹窗
			realScore: 0,
			poeScore: 0,
			isPost: true, //提交请求控制

			chose: 1, //选择状态
			studyText: "点击播放原音",
			isLook: false, //偷看

			hasRed: false, //是否有标红
			//微信录音
			wxLocalId:'',         //录音本地id  
			wxServerId:'',        //上传到微信服务器录音id

			//点赞评论
			start_input: false,
			content: "", //评论
			avatar:'',//学生头像
			name:'',//学生姓名
			className:'', //学生班级
			score:'', //成绩
			soundUrl:'', //录音
			lengthTime:'', //时长
			teacherName:'',//点赞老师
			//是否背诵
			isRead:false,
			appId:'',
			isSpeechAssessment: false,			//是否正在评测中
			AccessToken:'',					//token值

			readNewLogInfo:{},				//录音的info
			isActPraise: false,				//是否开始点赞
		};
	},
	watch: {
		popupShow(newVal,oldVal){
			if(newVal){
				touchFalse() 
			}else{
				touchTrue()
			}
		},
		scoreShow(newVal, oldVal) {
			if (newVal) {
				touchFalse();
			} else {
				touchTrue();
			}
		},

		isRecord(newVal, oldVal) {
			if (newVal == 0) {
				this.tipText = "点击按钮开始背诵";
			} else if (newVal == 1) {
				this.tipText = "正在背诵 " + this.recordTime + '"/40"';
			} else if (newVal == 2) {
				this.tipText = "点击按钮回放录音";
			}
		},
		recordPlay(newVal, oldVal) {
			if (newVal) {
				this.tipText = "正在回放录音";
			} else {
				this.tipText = "点击按钮回放录音";
			}
		},
		isPlay(newVal, oldVal) {
			if (newVal) {
				this.studyText = "点击暂停";
			} else {
				this.studyText = "点击播放原音";
			}
		},
		content(val) {
			if(!val){
				return
			}
			if (val.match(/^[ ]*$/)) {
				this.start_input = false;
			} else {
				this.start_input = true;
			}
		},
		// chose(val){
		// 	if(val ==1){
		// 		this.isRecord = 0
		// 	}
		// }
	},
	mounted: function() {
		// console.log('poeId',this.getPoeId,this.$route.query)
		// this.isRead= this.$route.query.isRead
		this.userType = this.userInfo.sstUserType 

		if(this.userType == 3){
			this.submitUser = this.userInfo
			this.submitUser.className = this.userInfo.classList[0].sstClassName
		}else{
			// 教师从上一级列表中取
			this.submitUser = JSON.parse(window.sessionStorage.getItem('selUserInfo'));
			this.submitUser.sstUserTruename = this.submitUser.name;
			this.submitUser.userAvatar = this.submitUser.avatar;
		}

		if( this.userType == 2 || this.isRead){
			this.chose = 2
			//  this.getPoetryInfo()
		}
		this.getInit()
		
		//   监听播放状态
	},
	methods: {
		...mapActions(['setPoeId']),
		//初始化配置和数据加载
		getInit(){
			let poetryId
			if(this.userType == 2){
				poetryId = this.$route.query.poeid
			}else if(this.userType == 3){
				poetryId = this.getPoeId ? this.getPoeId:this.$route.query.poeid
			}
			console.log('this.getPoeId',this.getPoeId)
			this.getPoetryInfo(poetryId, 0);
			this.getPoetryList()
			this.getConfig()
		},
		addAudioListener(){
			// console.log(this.$refs["in-audio"],"this.$refs['in-audio']")
			this.$refs["in-audio"].addEventListener("play", () => {
				this.isPlay = true;
			});
			this.$refs["in-audio"].addEventListener("pause", () => {
				this.isPlay = false;
			});
			this.$refs["in-audio"].addEventListener("ended", () => {
				this.isPlay = false;
			});
		},
		async getConfig(){
			// 微信签名 配置
			let data ={
				url:iosSystem() ? window.location.href.split('#')[0] : window.location.href
			}
			var [res1,res2] = await Promise.all([api.getSignature(data),
												api.getAccessToken()])
			if(res1.resultCode==1){
				let data=res1.value
				this.appId = data.appId
				wx.config({
					debug: true, // 开启调试模式
					appId: data.appId, // 必填，公众号的唯一标识
					timestamp: data.timestamp, // 必填，生成签名的时间戳
					nonceStr: data.nonceStr, // 必填，生成签名的随机串
					signature: data.signature,// 必填，签名
					jsApiList: ['startRecord','stopRecord','onVoiceRecordEnd','playVoice','pauseVoice','stopVoice','onVoicePlayEnd','uploadVoice','downloadVoice'] // 必填，需要使用的JS接口列表
				});
			}
			if(res2.resultCode==1){
				this.AccessToken = res2.value
			}
		},
		choseClick(type) {
			if (type == 2) {
				//背诵
				this.$refs["in-audio"].pause();
				this.chose = type;
			} else {
				//学习
				// console.log(this.isRecord,"this.isRecord")
				if (this.isRecord == 1) {
				//切换学习时如果正在录音则不切换
					this.$LayerTips({
						content: "请停止背诵后再切换",
						time: 1500
					});
				
				} else {
					this.chose = type;
					if (this.isRecord == 2 && this.recordPlay) {
						//停止播放录音
						wx.stopVoice({
								localId: this.wxLocalId, 
								success: (res)=> {
									this.recordPlay=false
								},
						}) 
					}
				}
			}
		},
		//列表按钮
		navClick() {
			if(this.scoreShow){
				this.scoreShow=false;
			}
			this.navShow = true;
		},
		//传递到列表组件，选择更换诗词时调用
		poeChange(id, change) {
			this.navShow = false;
			if (id != this.poe.Id)
			// console.log(this.getPoeId,"this.getPoeId")
			  this.getPoetryList('flag')
				this.getPoetryInfo(id, change);
		},
		//获取标红信息
		async getRecordList() {
			let poetryId 
			if(this.userType == 2){
				poetryId = this.$route.query.poeid
			}else if(this.userType == 3){
				poetryId = this.getPoeId ? this.getPoeId:this.$route.query.poeid
			}
			let data = {
					userId:this.userType == 2 ? this.$route.query.userId: this.userid,
					futureId:this.userInfo.futureId,
					pageSize : 1,
					pageIndex : 1,
					poetryId: poetryId,
					classId:''
			};
			var res=await api.readNewLogNewPage(data)
			if(res.resultCode==1){
				if(res.value){
					if(res.value[0].mjson){
						let recResJson=JSON.parse(res.value[0].mjson)
						this.wordRed(recResJson.result.details)
						const data =res.value[0]
						this.readNewLogInfo = data
						this.className = data.className
						this.avatar = data.avatar
						this.name = data.trueName
						this.score =data.score2
						this.soundUrl =data.soundUrl
						
						this.teacherName =data.teacherName
						this.rId = data.rid||''
						this.content =data.teacherContents

						if(data.times){
							var minute = Math.floor(data.times/40);
							var second = data.times%40;
							minute = (minute<10)?'0'+minute:minute;
							second = (second<10)?'0'+second:second;
							this.lengthTime = minute+":"+second
						}						
					}
				}
			}else{
				console.log('接口请求错误')
			}
		},
		//诗词详情
		async getPoetryInfo(poeId, isSwitch) {
				console.log('res------',poeId,isSwitch)
			this.isPoeReady = false;
			let param={
				userId:this.userType == 2 ? this.$route.query.userId: this.userid,
				id:poeId,
				futureId:this.userInfo.futureId
			}
			var res=await api.getBookPoetryInfo(param)
			console.log('res------',res.value)
			if(res.resultCode==1){
				this.poe=res.value
				this.audioSrc = "";
				this.$refs['in-audio'].pause()
				// this.poe.poeBg="background-image:url('"+this.poe.bgImgUrl+"');"
				let title=this.poe.name? this.poe.name:'';
				let dynasty=this.poe.dynasty? this.poe.dynasty:'';
				let author=this.poe.author? this.poe.author:'';
				let context=this.poe.context? this.poe.context:'';
				this.recordText=(title+dynasty+author+context).replace(/[\ |\~|\`|\!|\！|\？|\@|\#|\$|\%|\^|\&|\*|\(|\)|\（|\）|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\，|\。|\>|\/|\?]/g,'');
				this.isRead= this.poe.isRead
				if(isSwitch == 2){
					this.getPoetryList()
				}
				if(this.userType == 2 || this.isRead){
					this.getRecordList()

				}
				// this.isRead = this.poe.soundUrl?true:false;
				this.isPoeReady = true;
				this.$nextTick(() => {
					this.addAudioListener();
				});
			}
		},

		//诗词列表
		async getPoetryList(flag) {
			console.log('this.$route.query.type',this.$route.query.type)
			let param = {};
			var data={
				userId:this.userid,
				futureId:this.userInfo.futureId,
				readType: flag ?  this.$refs['poe-list'].choosed : this.$route.query.type,
				pageSize:1000,
				pageIndex :1,
			}
			var res=await api.bookPoetryPage(data)
			
			if(res.resultCode==1){
				this.poetryList =res.value
			}
		},
		//停止播放
		stopBtn(){
				this.$refs["in-audio"].pause();
		},
		//播放原音
		playBtn() {
			let audio = this.$refs["in-audio"];
			// console.log("audio", audio.paused);
			
			if(!this.poe.videoPath){
				this.$LayerTips({content: "播放地址错误",time: 1500});
				return
			}
			if (audio.paused) {
				if (this.isRecord == 1 || this.recordPlay) {
					audio.pause();
				} else {
					this.audioSrc = this.poe.videoPath;
					
					console.log('------',audio.networkState)
					let timer = setInterval(() => {
						if (audio.networkState == 2 || audio.networkState == 1) {
							audio.play();
							clearInterval(timer);
						} else {
							console.log(audio.networkState + "音频未就绪");
						}
					}, 1);
				}
			} else {
				audio.pause();
			}
		},
		//上一首
		lastOne() {
			this.isRecord =0
			console.log('点击切换上一首', this.poe.id)
			for (let i = 0; i < this.poetryList.length; i++) {
				if (this.poe.id == this.poetryList[i].id) {
					console.log('i',i)
					//   this.$refs['in-audio'].pause()
					if (i == 0) {
						  const length = this.poetryList.length -1
							this.getPoetryInfo(this.poetryList[length].id, 2);
							this.setPoeId(this.poetryList[length].id)
							this.$refs['in-audio'].pause()
					} else {
						this.getPoetryInfo(this.poetryList[i - 1].id, 2);
						this.setPoeId(this.poetryList[i - 1].id)
						this.$refs['in-audio'].pause()
					
					}
				}
			}
		},
		//下一首
		nextOne(type) {
			this.isRecord =0
			console.log('切换下一首-------start')
			if(this.poetryList.length <1){
					this.$LayerTips({
									content:"没有下一首",
									time:1000,
					});
					this.scoreShow = false;
					return
			}
			for (let i = 0; i < this.poetryList.length; i++) {
				if (this.poe.id == this.poetryList[i].id) {
					console.log('切换下一首')
				//   this.$refs['in-audio'].pause()
					if (i == this.poetryList.length - 1) {
						this.getPoetryInfo(this.poetryList[0].id,2)
						this.setPoeId(this.poetryList[0].id)
						if(type == 1){
						this.$refs["in-audio"].pause();
						}
						if(type ==2){
							this.chose =2
							this.scoreShow = false;
						}
					} else {
						if (type == 1) {
							this.getPoetryInfo(this.poetryList[i+1].id,2)
							this.setPoeId(this.poetryList[i + 1].id)
							this.$refs["in-audio"].pause();
						} else if (type == 2) {
							this.recordResJson = ""
							this.getPoetryInfo(this.poetryList[i + 1].id, 2);
							this.setPoeId(this.poetryList[i + 1].id)
							this.scoreShow = false;
							this.chose = 2;
						}
					}
				}
			}
		},
		/* audio状态 */
		inAudioError() {
			console.log("音频加载出错")
			// this.$LayerTips({
			// 	content: "音频加载出错",
			// 	time: 1500
			// });
		},
		inAudioWait() {},
		inAudioPlay() {
			this.isPlay = true;
		},
		inPlaying() {},
		inAudioPause() {
			this.isPlay = false;
		},
		inAudioCanplay() {},
		/* 播放结束 */
		inAudioEnd() {
			this.isPlay = false;
		},
		/* 播放位置 */
		inAudioTime() {},
		//点击背诵按钮
		recordClick() {
			if(this.isRecord==0){         //开始录音
				wx.startRecord({
					success: (res) => {
						this.isRecord=1
						this.recordTime=0
						this.recordTimer=setInterval(() => {
							if(parseInt(this.recordTime)<40){
								this.recordTime=parseInt(this.recordTime)+1;
								this.tipText='正在背诵 '+this.recordTime+'"/40"'
							}
							else{
								this.$LayerTips({
									content:"超过最大时长",
									time:1000,
								});
								clearInterval(this.recordTimer); 
								this.recordStop()
							}
				　　　　 },1000);
					},
				});
				// wx.onVoiceRecordEnd({
				// 	complete: (res) => {
				// 		this.$LayerTips({
				// 			content:"超过最大时长",
				// 			time:1000,
				// 		});
				// 		clearInterval(this.recordTimer); 
				// 		this.startrecordStop(res.localId)
				// 	}
				// });
			}else if(this.isRecord==1){    //停止录音
				this.recordStop()
			}else if(this.isRecord==2 && !this.recordPlay){  //播放录音
				wx.playVoice({
					localId: this.wxLocalId, // 需要播放的音频的本地ID
					success: (res)=> {
						this.recordPlay=true
					},
				});
				wx.onVoicePlayEnd({//语音播放完毕
					success: (res)=> {
						this.recordPlay=false
					},
				});
			}else if(this.isRecord==2 && this.recordPlay){   //停止播放录音
				wx.stopVoice({
					localId: this.wxLocalId, // 需要停止的音频的本地ID
					success: (res)=> {
						this.recordPlay=false
					},
				})
			}
		},
		/* 染红 */
		wordRed(recResJson) {
			if(!recResJson&&recResJson.length<1)
				return false
			if (this.poe.nameSerialize) {
				this.poe.nameSerialize.forEach((item, i) => {
				this.$set(item, "isRed", false);
				if (recResJson[i].score < 60) {
					item.isRed = true;
					this.hasRed = true;
				}
				});
				recResJson.splice(0, this.poe.nameSerialize.length);
			}
			if (this.poe.dynastySerialize) {
				this.poe.dynastySerialize.forEach((item, i) => {
				this.$set(item, "isRed", false);
				// item.isRed=false;
				if (recResJson[i].score < 60) {
					item.isRed = true;
					this.hasRed = true;
				}
				});
				recResJson.splice(0, this.poe.dynastySerialize.length);
			}
			if (this.poe.authorSerialize) {
				this.poe.authorSerialize.forEach((item, i) => {
					this.$set(item, "isRed", false);
					// item.isRed=false;
					if (recResJson[i].score < 60) {
						item.isRed = true;
						this.hasRed = true;
					}
				});
				recResJson.splice(0, this.poe.authorSerialize.length);
			}
			if (this.poe.contextSerialize) {
				console.log(recResJson)
				this.poe.contextSerialize.forEach((list, index) => {
				list.forEach((item, i) => {
					this.$set(item, "isRed", false);
					// item.isRed=false;
					if (i < list.length - 1 && recResJson[i].score < 60) {
					item.isRed = true;
					this.hasRed = true;
					}
				});
				recResJson.splice(0, list.length - 1);
				});
			}
		},
		/* 停止录音 */
		recordStop() {
			wx.stopRecord({
				success: (res) => {
					this.startrecordStop(res.localId)
				},
			});
		},
		startrecordStop(localId){
			this.wxLocalId = localId;
			this.isRecord=2
			this.tipText='点击按钮回放录音'
			clearInterval(this.recordTimer); 
			wx.uploadVoice({ //上传本地音频获取serverId
				localId: this.wxLocalId, 
				isShowProgressTips: 1, // 默认为1，显示进度提示
				success: (res)=> {
					this.wxServerId = res.serverId; // 返回音频的服务器端ID
					this.getEvaluate()
				},
			});
		},
		//评估
		async getEvaluate(){
			this.isSpeechAssessment = true
			var data = {
				Text:this.recordText,
				wxserverid:this.wxServerId,
				appid:this.appId,
				token: this.AccessToken
			}
			console.log(data)
			var res = await dataApi.DoTestUrlSpeechAssessment(data)
			console.log(res)
			if(res.ResultCode==1){
				this.isSpeechAssessment = false
				this.recordUrl=res.Value.voiceUrl
				this.actualTime=res.Value.result.wavetime;
				this.poeScore=res.Value.result.overall
				this.recordResJson=JSON.stringify(res.Value)
				this.hasRed=false;
				let recResJson=res.Value.result.details
				this.wordRed(recResJson)
			}
		},
		//重录按钮
		repeatClick(){
			if(this.recordPlay){
				wx.stopVoice({// 停止
					localId: this.wxLocalId, 
					success: (res)=> {
						this.recordPlay=false
					},
				})
			}
			this.popupShow=true;
		},

		/* 重录，提示组件调用 */
		popupSure() {
			if (this.scoreShow) {
				this.scoreShow = false;
				this.chose = 2;
			}
			this.popupShow = false;
			this.recordPlay = false;
			this.isRecord = 0;
		},
		//提交按钮
		saveClick() {
			if(this.recordPlay){
				wx.stopVoice({// 停止
					localId: this.wxLocalId, 
					success: (res)=> {
						this.recordPlay=false
					},
				})
			}
			this.postUserRead()  //上传录音信息
		},
		//提交录音请求
		async postUserRead() {
			let postPoeId=this.poe.id
			let data ={
				classId: this.userInfo.classList[0].classId,
				futureId: this.userInfo.futureId,
				isSubmit: true,
				mjson:this.recordResJson,
				poetryId:this.getPoeId ,
				score: this.poeScore,
				soundUrl: this.recordUrl,
				times: this.recordTime,
				userId: this.userInfo.userId
			}
			let res=await api.addUserRead(data)
			if(res.resultCode==1){
				console.log('提交成功')
				this.realScore=this.poeScore
				this.scoreShow=true;
				this.isRecord=0;
				this.ActCanvas()
				// this.getPoetryList()
				this.$refs['poe-list'].refreshMethods()
				this.$refs['poe-list'].poetryList.map((item,i)=>{ 
					if(item.id==postPoeId){
						item.isRead=true;
					}
				})
			}
		},
		//分享
		shareClick() {
			this.$router.push({
				path: "/poetry/share",
				query: {
				userid: "",
				poeScore: "",
				recordid: ""
				}
			});
			if (this.recordid) {
				this.$router.push({
				path: "/poetry/share",
				query: {
					userid: "",
					poeScore: "",
					recordid: ""
				}
				});
		
			} else {
				// alertMask(this, "没有录音");
			}
		},
		//老师点赞和评论
		async encourageBtn(mark) {

			if(this.userType!=2){
				return
			}
			if (mark=='noPrise') {//评论
				if(this.content.match(/^[ ]*$/)){
					// this.$toast(`最大支持张图片上传`);
						this.$LayerTips({
										content:"提交评论不能为空",
										time:1500,
						});
						return
				}
				let data ={
					teacherContents :this.content,
					rId:this.rId,
					teacherId:this.userid,
					teacherName:this.userInfo.sstUserTruename 

				}
				let res=await api.TeacherContent(data)
				if(res.resultCode==1){
					this.$LayerTips({content: "评论成功",time: 1500});
				}else{
						this.$LayerTips({content: "评论失败",time: 1500});
				}
			}else{//点赞
				if(this.readNewLogInfo.isPraise == 1){
					this.$LayerTips({content: "已经点赞",time: 1500});
					return
				}
				let data ={
					isPraise:1,
					rId:this.rId,
					teacherId:this.userid,
					teacherName:this.userInfo.sstUserTruename  
				}
				let res=await api.TeacherPraise(data)
				if(res.resultCode==1){
					this.isActPraise = true
					this.readNewLogInfo.isPraise = 1
				}else{
					this.$LayerTips({content: "点赞失败",time: 1500});
				}
			}
			
		},
		// 提交录音后的动效
		ActCanvas(){
			var can = document.getElementById('can');
			can.width = 750;
			can.height= 1334;
			var sources = [];
			//构建图片序列数据
			for(var i=0;i<20;i++){
				sources[i] = "./static/img/poetry/"+ (i+1) + ".png";//根据项目修改
			}
			var dataSetting = {
				sources: sources,
				diffTimestep: 10,
				stepAct: true,
			}
			let handleNew = new UPlayAnimate(can,dataSetting,()=>{

			})
		}
		
	}
}
</script>
<style  lang="scss" scoped>
	@import "~@/assets/scss/player.scss";
	.cut{
	background-color: #ffffff;
	}
	.bg{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 100;
		top: 0;
		left: 0;
		.close-poe-list{
			position: absolute;
            right: 0.32rem;
            top: 0.32rem;
            z-index: 10;
            @include elementSize(0.5rem,0.5rem);
            background: url(~@/assets/img/close.png) no-repeat 0 center;
            background-size: 100% 100%;
		}
	}
	.pinjia_bg {
	background: #FFF;
	border-radius: .5rem;
	box-shadow: 0 .1rem 0 rgba($color: #000000, $alpha: .05);
	// background-size: 100% 100%;
	// height: 10.4rem;
	width: 6.86rem;
	margin: .5rem auto;
	position: relative;
	.stuInfo {
		display: flex;
		padding: 0.5rem 0.4rem 0.2rem 0.4rem;
		.img {
		width: 1rem;
		height: 1rem;
		border-radius: 0.5rem;
		overflow: hidden;
		margin-right: 0.3rem;
		}
		.stu {
		width: 3.5rem;
		height: 1rem;
		.stu_name {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #333333;
			font-size: 0.4rem;
		}
		.stu_class {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #666666;
			font-size: 0.3rem;
		}
		}
		.score {
		width: 1.1rem;
		height: 0.7rem;
		line-height: 0.7rem;
		background-color: #e5f7ff;
		color: #02affe;
		font-size: 0.3rem;
		text-align: center;
		border-radius: 0.2rem;
		}
	}
	.line {
		background: url(~@/assets/img/player/dot.png) no-repeat;
		background-size: 100% 100%;
		height: 0.08rem;
		width: 6rem;
		margin: 0 auto;
	}
	.encourage {
		.ico_praise{
			width: 1.1rem;
			height: 1.1rem;
			span{
				width: .7rem;
			}
			span.active{
				width: .9rem;
				height: .9rem;
			}
		}
		.vtxt {
			font-size: .3rem; color: #666;
		}
	}
	.comment {
		padding: 0 0.4rem;
		position: relative;
		margin-top: 0.4rem;
		padding-bottom: .2rem;
		.txt {
		top: 0.15rem;
		left: 0.75rem;
		color: #333333;
		font-size: 0.3rem;
		font-weight: 550;
		position: absolute;
		}
		.comment_content {
		width: 100%;
		height: 2.2rem;
		border-radius: 0.4rem;
		background-color: #f3f5f7;
		width: 100%;
		height: 2.2rem;
		border-radius: 0.4rem;
		background-color: #f3f5f7;
		padding: 0.85rem 0.3rem 0.3rem 0.35rem;
		font-size: 0.32rem;
		color: #666666;
		resize: none;
		}
	}
	.btn_t {
		background: url(~@/assets/img/player/unSubmit.png) no-repeat;
		background-size: 3.6rem 0.96rem;
		width: 3.6rem;
		height: 0.96rem;
		margin: 0.2rem auto;
	}
	.btn_s {
		background: url(~@/assets/img/player/submit.png) no-repeat;
		background-size: 3.6rem 0.96rem;
		width: 3.6rem;
		height: 0.96rem;
		margin: 0.4rem auto;
	}
}
.loadTips{
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba($color: #000000, $alpha: .7);
	color: #fff;
	text-align: center;
	padding-top: 5rem;
	z-index: 8000;
}
.in-elapse{
	background: #33cc89;
}
.playermask-con{
	width: 100%; height: 100%;
	position: absolute; top: 0; left: 0;
	color: #fff;	
	&::after{
		content: '';
		position: absolute; top: 50%; left: 50%;
		transform: translate(-50%,-50%);
		background: url(~@/assets/img/player/light.png) no-repeat 0 0;
		background-size: 100%;
		width: 5.18rem; height: 7rem;
	}
	canvas{
		width: 100%; height: 100%;
		margin-top: -.3rem;
		position: relative; z-index: 2;
	}
	.lbg{
		position: absolute; top: 50%; left: 50%;
		transform: translate(-50%,-50%);
		width: 5.18rem; height: 7rem;
		z-index: 3;
	}
	.score{
		padding-top: 1.8rem;
		font-size: 1rem; font-weight: bold;
		line-height: 1;
		text-align: center;
	}
	.level{
		background: url(~@/assets/img/player/levelbg.png) no-repeat 0 0;
		background-size: 100%;
		width: 3.72rem; height: 1.17rem;
		margin: .54rem auto 0;
		text-align: center;
		font-size: .42rem; font-weight: bold;
		line-height: .86rem;
	}
	.btn-next{
		width: 4.2rem; height: 0.9rem;
		margin: .4rem auto 0.2rem;
		text-align: center;
		border-radius: 0.5rem;
		line-height: 0.9rem;
		font-size: 0.34rem;
		background:rgba(51,204,137,.5);
		border:1px solid #33cc89;
	}
}
</style>